<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
    		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>饮食提醒</title>
		<link rel="stylesheet" type="text/css" href="../css/mui.css"/>
		<link rel="stylesheet" type="text/css" href="../css/mui.picker.css"/>
		<link rel="stylesheet" type="text/css" href="../css/mui.poppicker.css"/>
		<link rel="stylesheet" type="text/css" href="../css/mui.dtpicker.css"/>
		<link rel="stylesheet" type="text/css" href="../css/common.css"/>
		<style type="text/css">
			.mui-btn {
				font-size: 16px;
				padding: 8px;
				margin: 3px;
			}
			.openpop,.openpoptwo{
				border-top: none;
				border-left: none;
				border-radius: 0;
				font-size: 1rem;
				padding: 5px;
				margin: 3px;
				color: #666666;
			}
			.openpop {
				background: url(../img/remind/10.png) no-repeat;
				background-size:auto  40%;
				background-position:95% 40% ;
			}
			.openpoptwo{
				background: url(../img/remind/11.png) no-repeat;
				background-size:auto  60%;
				background-position:0% 50% ;
			}
			h5.mui-content-padded {
				margin-left: 3px;
				margin-top: 20px !important;
			}
			h5.mui-content-padded:first-child {
				margin-top: 12px !important;
			}
			.ui-alert {
				text-align: center;
				padding: 20px 10px;
				font-size: 16px;
			}
			.shanjian{
				position: absolute;
				top: 10px;
				left: 2px;
				height: 1.3rem;
			}
			#servicelist li:last-child button{
				border: none;
			}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav PT20" style="background:#FFFFFF;height: 60px; box-shadow: none;">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: #fc9153;"></a>
			<h1 class="mui-title">饮食提醒</h1>
			<a class="mui-pull-right PT10" style="color: #fc9153;" onclick="save()">保存</a>
		</header>
		<div class="main PT50 width100">
			<ul class="Pad0 backgF MB10">
				<li>
					<div class="overflowH">
						<span class="fl  font1 color6" style="padding: 7px;">套餐</span>
						<div class="fr width70">
							<button id='showUserPicker' class="mui-btn mui-btn-block textL openpop" type='button'>老人A套餐</button>
						</div>
					</div>
				</li>
				<li>
					<div class="overflowH">
						<span class="fl  font1 color6" style="padding: 7px;">份量</span>
						<div class="fr width70">
							<button id='showUserPicker2' class="mui-btn mui-btn-block textL openpop" type='button'>中</button>
						</div>
					</div>
				</li>
				<li>
					<div class="overflowH">
						<span class="fl  font1 color6" style="padding: 7px;">开始</span>
						<div class="fr width70">
							<button id='demo4' data-options='{"type":"date"}' class="btn mui-btn mui-btn-block textL openpop">2019-04-22</button>
						</div>
					</div>
				</li>
				<li>
					<div class="overflowH">
						<span class="fl  font1 color6" style="padding: 7px;">重复</span>
						<div class="fr width70">
							<button id='showUserPicker4' class="mui-btn mui-btn-block textL openpop" type='button' style="border: none;">重复</button>
						</div>
					</div>
				</li>
			</ul>
			<ul id="servicelist" class="Pad0 backgF MT5">
				<li onclick="addtime()">
					<div class="overflowH">
						<span class="fl  font1 color6" style="padding: 7px;">时间</span>
						<div class="fr width70">
							<button  class="mui-btn mui-btn-block textL openpoptwo" type='button'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;添加时间</button>
						</div>
					</div>
				</li>
				<li>
					<div class="overflowH">
						<span class="fl  font1 color6" style="padding: 7px;"></span>
						<div class="fr width70 positionR">
							<button id='demo5' data-options='{"type":"time"}' class="btn mui-btn mui-btn-block textL openpop" style="padding-left: 31px;">8:00</button>
							<img class="shanjian" src="../img/remind/12.png"/>
						</div>
					</div>
				</li>
				<li>
					<div class="overflowH">
						<span class="fl  font1 color6" style="padding: 7px;"></span>
						<div class="fr width70 positionR">
							<button id='demo6' data-options='{"type":"time"}' class="btn mui-btn mui-btn-block textL openpop" style="padding-left: 31px;">12:00</button>
							<img class="shanjian" src="../img/remind/12.png"/>
						</div>
					</div>
				</li>
				<li>
					<div class="overflowH">
						<span class="fl  font1 color6" style="padding: 7px;"></span>
						<div class="fr width70 positionR">
							<button id='demo7' data-options='{"type":"time"}' class="btn mui-btn mui-btn-block textL openpop" style="padding-left: 31px;">17:00</button>
							<img class="shanjian" src="../img/remind/12.png"/>
						</div>
					</div>
				</li>
			</ul>
		</div>
		<script src="../js/mui.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mui.picker.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mui.poppicker.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mui.dtpicker.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			(function($, doc) {
				$.init();
				$.ready(function() {
					
					//药品
					var userPicker = new $.PopPicker();
					userPicker.setData([{
						value: 'ywj',
						text: '老人A套餐'
					}, {
						value: 'aaa',
						text: '老人B套餐'
					}, {
						value: 'lj',
						text: '老人C套餐'
					}, {
						value: 'ymt',
						text: '老人D套餐'
					}, {
						value: 'shq',
						text: '老人E套餐'
					}, {
						value: 'zhbh',
						text: '老人F套餐'
					}, {
						value: 'zhy',
						text: '老人G套餐'
					}, {
						value: 'gyf',
						text: '老人H套餐'
					}]);
					var showUserPickerButton = doc.getElementById('showUserPicker');
//					var userResult = doc.getElementById('userResult');
					showUserPickerButton.addEventListener('tap', function(event) {
						userPicker.show(function(items) {
							showUserPickerButton.innerText = items[0].text;
							//返回 false 可以阻止选择框的关闭
							//return false;
						});
					}, false);
					//剂量
					var userPicker2 = new $.PopPicker();
					userPicker2.setData([{
						value: 'ywj',
						text: '大'
					}, {
						value: 'aaa',
						text: '中'
					}, {
						value: 'lj',
						text: '小'
					}]);
					var showUserPickerButton2 = doc.getElementById('showUserPicker2');
					showUserPickerButton2.addEventListener('tap', function(event) {
						userPicker2.show(function(items) {
							showUserPickerButton2.innerText = items[0].text;
							//返回 false 可以阻止选择框的关闭
							//return false;
						});
					}, false);
					
					//重复
					var userPicker4 = new $.PopPicker();
					userPicker4.setData([{
						value: 'ywj',
						text: '一次'
					}, {
						value: 'aaa',
						text: '二次'
					}, {
						value: 'lj',
						text: '三次'
					}, {
						value: 'ymt',
						text: '四次'
					}, {
						value: 'shq',
						text: '五次'
					}, {
						value: 'zhbh',
						text: '重复'
					}]);
					var showUserPickerButton4 = doc.getElementById('showUserPicker4');
					showUserPickerButton4.addEventListener('tap', function(event) {
						userPicker4.show(function(items) {
							showUserPickerButton4.innerText = items[0].text;
							//返回 false 可以阻止选择框的关闭
							//return false;
						});
					}, false);
				});
				//时间
				var btns = $('.btn');
				btns.each(function(i, btn) {
					btn.addEventListener('tap', function() {
						var _self = this;
						if(_self.picker) {
							_self.picker.show(function (rs) {
								btn.innerText = '选择结果: ' + rs.text;
								_self.picker.dispose();
								_self.picker = null;
							});
						} else {
							var optionsJson = this.getAttribute('data-options') || '{}';
							var options = JSON.parse(optionsJson);
							var id = this.getAttribute('id');
							/*
							 * 首次显示时实例化组件
							 * 示例为了简洁，将 options 放在了按钮的 dom 上
							 * 也可以直接通过代码声明 optinos 用于实例化 DtPicker
							 */
							_self.picker = new $.DtPicker(options);
							_self.picker.show(function(rs) {
								/*
								 * rs.value 拼合后的 value
								 * rs.text 拼合后的 text
								 * rs.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
								 * rs.m 月，用法同年
								 * rs.d 日，用法同年
								 * rs.h 时，用法同年
								 * rs.i 分（minutes 的第二个字母），用法同年
								 */
								btn.innerText = rs.text;
								/* 
								 * 返回 false 可以阻止选择框的关闭
								 * return false;
								 */
								/*
								 * 释放组件资源，释放后将将不能再操作组件
								 * 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
								 * 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
								 * 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。
								 */
								_self.picker.dispose();
								_self.picker = null;
							});
						}
						
					}, false);
				});
			})(mui, document);
			//保存
			function save(){
				mui.toast("保存成功");
				mui.back();
			}
			//添加时间
			numbut=8;
			function addtime(){
				var li=document.createElement('li');
					li.innerHTML =`
					<div class="overflowH">
							<span class="fl  font1 color6" style="padding: 7px;"></span>
							<div class="fr width70 positionR">
								<button id="demo${numbut}" data-options='{"type":"time"}' class="btn mui-btn mui-btn-block textL openpop" style="padding-left: 31px;">09:00</button>
								<img class="shanjian" src="../img/remind/12.png"/>
							</div>
						</div>
				`
				document.getElementById('servicelist').appendChild(li)
				datetime("demo"+numbut);
				numbut++;
			}
			//删除时间servicelist
			mui("#servicelist").on('tap','.shanjian',function(){
				document.getElementById("servicelist").removeChild(this.parentNode.parentNode.parentNode);
			})
			
			//时间
			function datetime(idname){
				var btn = document.getElementById(idname);
				console.log(idname)
					btn.addEventListener('tap', function() {
						var _self = this;
						if(_self.picker) {
							_self.picker.show(function (rs) {
								btn.innerText =rs.text;
								_self.picker.dispose();
								_self.picker = null;
							});
						} else {
							var optionsJson = this.getAttribute('data-options') || '{}';
							var options = JSON.parse(optionsJson);
							var id = this.getAttribute('id');
							/*
							 * 首次显示时实例化组件
							 * 示例为了简洁，将 options 放在了按钮的 dom 上
							 * 也可以直接通过代码声明 optinos 用于实例化 DtPicker
							 */
							_self.picker = new mui.DtPicker(options);
							_self.picker.show(function(rs) {
								/*
								 * rs.value 拼合后的 value
								 * rs.text 拼合后的 text
								 * rs.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
								 * rs.m 月，用法同年
								 * rs.d 日，用法同年
								 * rs.h 时，用法同年
								 * rs.i 分（minutes 的第二个字母），用法同年
								 */
								btn.innerText = rs.text;
								/* 
								 * 返回 false 可以阻止选择框的关闭
								 * return false;
								 */
								/*
								 * 释放组件资源，释放后将将不能再操作组件
								 * 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
								 * 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
								 * 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。
								 */
								_self.picker.dispose();
								_self.picker = null;
							});
						}
					}, false);
			}
		</script>
	</body>
</html>
